<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/12
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 480px;
        }
        .info-box {
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .details {
            font-size: 18px;
        }

        h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        p {
            margin-bottom: 5px;
        }
        .center-align {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div><span>个人信息</span></div>
    <div>
        <el-divider><span style="font-size: 20px">基本信息</span></el-divider>
    </div>
    <div>
        <table width="100%">
            <tr>
                <td style="width: 50%;" class="center-align">
                    <div>
                        <form action="">
                            <img :src="staff.url" width="400px" height="300px"><br>
                            <input type="file"  id="fileInput" style="display: none;">
                            <br><br><br>
                            <el-button type="primary" @click="imageUpload" style="margin-top: 5px">上传图片</el-button>
                        </form>
                    </div>
                </td>
                <td style="width: 50%;">
                    <div class="details">
                        <h2></h2>
                        <p>编号:{{staff.staffid}}</p>
                        <p>姓名:{{staff.staffname}}</p>
                        <p>所属部门:{{staff.deptname}}</p>
                        <p>入职时间:{{staff.entrytime}}</p>
                        <p>职位:{{staff.rolename}}</p>
                        <p>身份证号码:{{staff.idcard}}</p>
                        <p>手机号:{{staff.phone}}</p>
                        <p>地址:{{staff.address}}</p>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            staff:{}

        },
        created() {
            this.init();
        },
        methods:{
            init(){
                axios.post("/home/jbxx").then(function (resp){
                    console.log(resp)
                    app.staff=resp.data.data
                })
            },
            imageUpload(){
                let fileInput = document.getElementById('fileInput');
                fileInput.click();
                document.getElementById('fileInput').addEventListener('input', function(event) {
                    let headUrl = event.target.files[0];
                    let formData=new FormData();
                    formData.append('headUrl',headUrl);
                    console.log(formData);
                    axios({
                        url: '/home/upload',
                        method: 'post',
                        data: formData,
                        headers: { 'Content-Type': 'multipart/form-data' },
                    }).then(resp=>{
                        console.log(resp.data.data)
                        app.staff.url = resp.data.data
                    })
                })
            },
        },

    })
</script>
</body>
</html>
